﻿@using Website.CRUDServices
@using Location = Website.Models.Domain.Location
@using Profile = Website.CRUDServices.Profile
@using Region = Website.Models.Domain.Region
@Model
@{
    this.ViewBag.Title = "Ny Klynge";
    this.Layout = "~/Views/_Shared/_Layout.cshtml";
    var Regions = this.ViewData["Regions"] as List<Region>;
    var Locations = this.ViewData["Locations"] as List<Location>;
    var Profiles = this.ViewData["Profiles"] as List<Profile>;
    var ClusterStatusTypes = this.ViewData["ClusterStatusTypes"] as List<ClusterStatusType>;
    var ClusterMethodTypes = this.ViewData["ClusterMethodTypes"] as List<ClusterMethodType>;
    var Projects = this.ViewData["Projects"] as List<Project>;
    var errorMsg = new HtmlString(string.Empty);
    int counter = 0;
    var Cluster = Model as Cluster;
    var ClusterMethods = this.ViewData["ClusterMethods"] as List<ClusterMethod>;
    var ClusterStatuses = this.ViewData["ClusterStatuses"] as List<ClusterStatus>;
    if (this.ViewData["ErrorMessage"] != null)
    {
        errorMsg = this.ViewData["ErrorMessage"] as HtmlString;
    }

}

<script>
    //datepicker script
    $(function () {
        $("#datepicker").datepicker();
        $('#OwnerProjects').multiSelect();
    });
</script>

<script type="text/javascript">
    //toggle script toggles div with id = id
    function toggle(id) {
        if (document.getElementById(id).style.display == 'none' || document.getElementById(id).style.display == "") {
            document.getElementById(id).style.display = 'block';
        } else {
            document.getElementById(id).style.display = 'none';
        }
    }
</script>

@using (this.Html.BeginForm("NewCluster", "Cluster", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="error">
        @errorMsg
    </div>

    // *******************Cluster*************************
    // hidden field to hold ID of the object
    <input type="hidden" id="ID" name="ID"  readonly="readonly" value="@Cluster.ID" />
    // name
    <div class="formBullet">Navn på klynge</div>
    <input type="text" id="Name" name="Name" value="@Cluster.Name"/>

    // location
    <div class="formBullet">Lokation</div>
    <div class="formEntry">
        <select name="Location" id="Location">
            <option value="@Guid.Empty">Vælg en lokation</option>
            @foreach (Location loc in Locations.OrderBy(x => x.Name))
            {
                if (loc.ID == Cluster.Location)
                {
                <option value="@loc.ID" selected="selected">@loc.Name</option>
                }
                else
                {
                <option value="@loc.ID">@loc.Name</option>
                }
            }
        </select>
        <input type="button" value="Ny" id="newLocation" />
    </div>

            // ownerProjects chooser
    <div class="formBullet">Alle projekter tilknyttet</div>
    <div class="formEntry">
        <select multiple="multiple" name="OwnerProjects" id="OwnerProjects">
            @foreach (Project proj in Projects.Where(x => (Cluster.OwnerProjects ?? new Guid[0]).Contains(x.ID)))
            {
                <option value="@proj.ID" selected="selected">@proj.Name</option>
            }
            @foreach (Project proj in Projects.Where(x => !(Cluster.OwnerProjects ?? new Guid[0]).Contains(x.ID)))
            {
                <option value="@proj.ID">@proj.Name</option>
            }
        </select>
    </div>

            // profiles chooser
    <div class="formBullet">Profiler</div>
    <div class="formEntry">
        <select multiple="multiple" name="Profiles" id="Profiles">
            @foreach (Profile prof in Profiles.Where(x => (Cluster.Profiles ?? new Guid[0]).Contains(x.ID)))
            {
                <option value="@prof.ID" selected="selected">@prof.Name</option>
            }
            @foreach (Profile prof in Profiles.Where(x => !(Cluster.Profiles ?? new Guid[0]).Contains(x.ID)))
            {
                <option value="@prof.ID">@prof.Name</option>
            }
        </select>
        <script src="@Url.Content("jquery.multi-select.js")" type="text/javascript"> </script>
    </div>

            // *******************ClusterStatus*************************
    <div class="formBullet">Status</div>
            foreach (ClusterStatusType cst in ClusterStatusTypes)
            {
    <hr />
    <div class="formBullet">
        <input type="checkbox" onclick="@Html.Raw("toggle('" + cst.ID + "');")" name="ClusterStatus[@counter].Checked" value="true" @if (ClusterStatuses[counter].Type==cst.ID)
                                                                                                                                {@Html.Raw("checked")}/>@cst.Name<br />
    </div>
    @if (ClusterStatuses[@counter].Type == cst.ID)
    {@Html.Raw("<script>$(function () {toggle('" + cst.ID + "');});</script>")}
    <div class="formEntry open_hidden" id="@cst.ID">
        <!--guid-->
        <input type="hidden" name="ClusterStatus[@counter].Type" value="@cst.ID" />
        <!--active?-->
        <div class="formEntry">
            <input type="radio" name="ClusterStatus[@counter].IsActive" value="true"@if (ClusterStatuses[counter].IsActive)
                                                                                    {@Html.Raw("checked")}>Aktiv
                <input type="radio" name="ClusterStatus[@counter].IsActive" value="false" @if (!ClusterStatuses[counter].IsActive)
                                                                                    {@Html.Raw("checked")}>Inaktiv
        </div>
        <!--comments-->
        <div class="formBullet">
            Kommentarer  til @cst.Name<br />
        </div>
        <div class="formEntry">
            <textarea name="ClusterStatus[@counter].Comments">@ClusterStatuses[counter].Comments</textarea>
        </div>
    </div>
                                                                                    counter++;
            }

            counter = 0;

            // *******************ClusterMethod*************************
    <div class="formBullet">Metode</div>
            foreach (ClusterMethodType cmt in ClusterMethodTypes)
            {
    <hr />
    <div class="formBullet">
        <input type="checkbox" onclick="@Html.Raw("toggle('" + cmt.ID + "');")" name="ClusterMethod[@counter].Checked" value="true" />@cmt.Name<br />
    </div>
    <div class="formEntry open_hidden" id="@cmt.ID">
        <!--guid-->
        <input type="hidden" name="ClusterMethod[@counter].Type" value="@cmt.ID" />
        <!--comments-->
        <div class="formBullet">
            Kommentarer til @cmt.Name<br />
        </div>
        <div class="formEntry">
            <textarea name="ClusterMethod[@counter].Comments"></textarea>
        </div>
        <!--filechooser-->
        <div class="formBullet">
            Fil til arkivering<br />
        </div>
        <div class="formEntry">
            @FileUpload.GetHtml("ClusterMethod[" + counter + "].PostedFiles", 1, true, false, "Tilføj flere filer", "Vælg fil til arkivering")
        </div>
        <!--arkchive location-->
        <div class="formBullet">Fysisk arkiverings placering</div>
        <input type="text" id="Archive" name="ClusterMethod[@counter].ArchiveLocation" />
    </div>
                counter++;
            }

    <div class="buttonHolder">
        <input type="submit" value="Opret" />
    </div>
}

<script>

    @*
        Og nu da det er rykket herned kan du bruge @otherID til at lave dit script.
        Alt hvad der bliver skrevet med et @ bliver parset (server-side) før siden er endeligt loadet.
    *@
    $(function () {
        $('#Profiles').multiSelect();
        $("#newLocation").click(function () {
            $("#dialog").dialog({
                width: "340px",
                modal: true
            });
        });
        //choosing "andet" will pop up an additional text-box for input on the subject


        $('#CreateLocationForm').submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        // We have a JSON object in case of success
                        $('#Locations')
                            .append($("<option></option>")
                                .attr("value", result.locationID)
                                .text(result.locationName))
                            .val(result.locationID);


                        $("#dialog").dialog('close');
                    } else {
                        // We have the partial with errors in case of failure
                        // so all we have to do is update the DOM
                        $('#CreateLocationForm').html(result);
                    }
                }
            });
        });
    });
</script>



<div id="dialog" title="Opret ny lokation" style="display: none;">
    @Html.Partial("~/Views/Locations/_CreateLocationPartial.cshtml", new Location())
</div>
